<template>
    <div class="bodys">
        <Header :headerTxt="$t('ws_assets.coin')" :showBack="true"></Header>
        <el-select @change="showvalue" v-model="value2" :placeholder="$t('ws_assets.selectCoin')">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled">
            </el-option>
        </el-select>
        <div class="content">
            <div id="qrcode" class="ecode">
            </div>
            <p>{{$t('ws_assets.saveQR')}}</p>
            <p class="tips">{{$t('ws_assets.coinAddress')}}</p>
            <p>dasfjkgdsjhfasdghjfkgdasgfukg</p>
            <el-button type="primary">{{$t('ws_assets.copy')}}</el-button>
        </div>
        
    </div>
</template>
<script>
import Header from "@/components/Header";
import QRCode  from "qrcodejs2"
export default {
    data(){
        return{
            link:"https://baidu.com",
            options: [{
               value: '选项1',
                label: this.$t('ws_assets.goldCake')
                }, {
                value: '选项3',
                label: this.$t('ws_assets.oysterSauce')
                }, {
                value: '选项4',
                label: this.$t('ws_assets.dragonMustard')
                }, {
                value: '选项5',
                label: this.$t('ws_assets.pekingDuck')
                }],
            value2: '',
            fee:0.00
        }
    },
    methods: {
        showvalue(){
        },
        //  生成二维码
            qrcode () {
                let that = this;
                let qrcode = new QRCode('qrcode', {
                    width: 150,
                    height: 150,
                    Top:5,       // 高度
                    text:  this.link,   // 二维码内容
                    // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                    // background: '#f0f',   // 背景色
                    // foreground: '#ff0'    // 前景色
                })
            }
    },
    components:{
         Header , QRCode
    
    },
    mounted(){ 
        this.qrcode()
    }
}
</script>
<style lang="stylus" scoped>
.bodys{
    background:#F8F8FF
    height:100vh;
    width:100vw;
}
.el-select{
    width:90vw;
    margin-top:1.2rem;
    margin-left:5vw;
}
.content{
  width 90vw;
  margin:.2rem auto;
  background : #fff;
  padding-top: 1rem;
  padding-bottom 1rem;
  text-align: center;
  font-size:.3rem;
  .ecode{
    width 3rem;
    height:3rem;
    overflow:hidden;
    margin: 0 auto .4rem auto;
    background-color :#32B16C;
    >img{
      width: 100%;
    }
  }
  .tips{
    font-size: .25rem;
    color:#999;
    margin :0;
  }
}
.el-button{
    width:80vw;
    margin-left:.5vw;
}
</style>